<template>
  <div>
    <div v-if="active == 1">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">实名信息</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode"
          @click="getMainEdit(mainData)"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>认证照片：</span>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaLicenseImageUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaLicenseImageUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">营业执照照片</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardPositiveUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardPositiveUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证人像面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardBackUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardBackUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证国徽面</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>公司名称：{{ mainData.compName }}</span>
          </el-col>
          <el-col :span="6">
            <span>营业执照编号：{{ mainData.roaLicenseNo }}</span>
          </el-col>
          <el-col :span="6">
            <span>营业执照有效期：{{ mainData.roaLicenseTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>法人名称：{{ mainData.roaName }}</span>
          </el-col>
          <el-col :span="6">
            <span>身份证号：{{ mainData.roaCardNo }}</span>
          </el-col>
          <el-col :span="6">
            <span>法人身份证有效期：{{ mainData.roaCardTime }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-if="active == 2">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-bank-card"></i
          ><span class="haruyuki-ml-6">结算卡信息</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode"
          @click="getCardEdit(cardData)"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>认证照片：</span>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robCardPublicImgUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robCardPublicImgUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">对公开户证明</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>开户行：{{ cardData.robBank }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户支行：{{ cardData.robBankBranch }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户名称：{{ cardData.robBankName }}</span>
          </el-col>
          <el-col :span="6">
            <span>联行号：{{ cardData.robUnionNumber }}</span>
          </el-col>
          <el-col :span="6">
            <span>银行账号：{{ cardData.robBankNo }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      :title="'编辑' + dialogText"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div v-if="active == 1">
          <mainForm :mainForm="mainForm" ref="toMainForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 2">
          <cardForm :cardForm="cardForm" ref="toCardForm" />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  authUpdate,
  bankUpdate,
} from "@/api/system/tenant";
import mainForm from "@/components/rb-core/main-form";
import cardForm from "@/components/rb-core/card-form";
export default {
  components: {
    mainForm,
    cardForm,
  },
  props: {
    tenantId: {
      type: String,
      required: true,
    },
    isStartNode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogText: "",
      active: 1,
      mainData: {},
      cardData: {},
      mainForm: {},
      cardForm: {},
    };
  },
  methods: {
    /* 点击实名信息 处理回显数据 */
    getMainEdit(mainData) {
      this.active = 1;
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.dialogText = this.posTitle.mainTitle;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 &&
        this.mainForm.roaLicenseImageUrl
          ? this.$refs["toMainForm"].roaLicenseFileList.push({
              url: this.mainForm.roaLicenseImageUrl || "",
            })
          : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 &&
        this.mainForm.roaCardPositiveUrl
          ? this.$refs["toMainForm"].roaPositiveFileList.push({
              url: this.mainForm.roaCardPositiveUrl || "",
            })
          : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 &&
        this.mainForm.roaCardBackUrl
          ? this.$refs["toMainForm"].roaCardBackFileList.push({
              url: this.mainForm.roaCardBackUrl || "",
            })
          : this.$refs["toMainForm"].roaCardBackFileList;
      });
    },
    /* 实名信息 提交修改 */
    getMainEditForm() {
      this.$refs["toMainForm"].$refs["mainForm"].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.mainForm,
            tenantId: this.oem.tenantId,
          };
          authUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击结算卡信息 处理回显数据 */
    getCardEdit(cardData) {
      this.dialogVisible = true;
      this.dialogText = this.posTitle.cardTitle;
      this.active = 2;
      this.cardForm = JSON.parse(JSON.stringify(cardData));
      this.$nextTick(() => {
        this.$refs["toCardForm"].robCardFileList.length == 0 &&
        this.cardForm.robCardPublicImgUrl
          ? this.$refs["toCardForm"].robCardFileList.push({
              url: this.cardForm.robCardPublicImgUrl || "",
            })
          : this.$refs["toCardForm"].robCardFileList;
      });
    },
    /* 结算卡信息 提交修改 */
    getCardEditForm() {
      this.$refs["toCardForm"].$refs["cardForm"].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.cardForm,
            tenantId: this.oem.tenantId,
          };
          bankUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>